<template>
  <div id="realLoad" class="realLoad">
    <!--  桥梁选择  -->
<!--    YU 隐藏到头部选桥功能-->
<!--    <div class="search">-->
<!--      <el-button class="seletBtn top" size="small" type="success" icon="el-icon-circle-plus-outline"-->
<!--        @click="selectBridge">桥梁选择</el-button>-->
<!--      <el-tabs class="top" v-model="editableTabsValue" type="card" closable @tab-remove="removeTab">-->
<!--        <el-tab-pane size="small" :key="item.id" v-for="(item, index) in editableTabs" :label="item.name"-->
<!--          :name="item.id"></el-tab-pane>-->
<!--      </el-tabs>-->
<!--    </div>-->
    <div class="realLoad-box">
      <div class="realLoad-box-left">
        <CardContainer headerName="今日车流量对比" style="position:relative">
          <template slot="card-content">
            <!-- <div class="tips" v-if="is3" >
              <img src="../../../assets/images/pages/aliNoData.png" alt="" class="myImages">
            </div> -->
            <NoData v-show="is3" />
            <div v-show="!is3" class="realLoad-trafficFlow">
              <div v-for="(item, index) in trafficArr" :key="index" class="realLoad-trafficFlow-item">
                <div class="realLoad-trafficFlow-header">
                  <img src="../../../assets/healthMonitorAssets/img/liuliang1.png" alt="" />
                  <span>{{ item.direction }}</span>
                  <span class="Num">
                    {{ item.total }}
                  </span>
                </div>
                <div :id="item.id" class="realLoad-trafficFlow-chart traff"></div>

              </div>
            </div>

          </template>
        </CardContainer>
      </div>
      <div class="realLoad-box-right">
        <CardContainer headerName="今日车型超载统计" style="position:relative">
          <template slot="card-content">
            <NoData v-show="is1" />
            <div v-show="!is1" id="carOverLoad" class="realLoad-carOverLoad"></div>
          </template>
        </CardContainer>
      </div>
    </div>
    <div class="realLoad-box">
      <div class="realLoad-box-left">
        <div class="realLoad-box-middle">
          <CardContainer headerName="今日车型对比" style="position:relative">
            <template slot="card-content">
              <!-- <div class="tips" v-if="is2" >
                <img src="../../../assets/images/pages/aliNoData.png" alt="" class="myImages">
              </div> -->
              <NoData v-show="is2" />
              <div v-show="!is2" id="carComparison" class="realLoad-carComparison"></div>
            </template>
          </CardContainer>
        </div>
        <div class="realLoad-box-middle">
          <CardContainer headerName="超限车次频次" style="position:relative">
            <template slot="card-content">
              <!-- <div class="tips" v-if="is4" >
                <img src="../../../assets/images/pages/aliNoData.png" alt="" class="myImages">
              </div> -->
               <NoData v-show="is4" />
              <div v-show="!is4" class="realLoad-carComparison">
                <CarList :trainRateData="trainRateData"></CarList>
              </div>
            </template>
          </CardContainer>
        </div>
      </div>
      <div class="realLoad-box-right">
        <div id="ssss" class="realLoad-box-detail vvv" v-show="isShowDetail">
          <div
            id="id_test_video"
            style="width: 100%; height: auto"
          ></div>
          <p class="fy">
            <el-pagination
              layout="prev, pager, next"
              page-size= 1
              hide-on-single-page
              @current-change='currentChange'
              :total="total">
            </el-pagination>
           </p>
        </div>
        <div v-show="!isShowDetail">
          <CardContainer headerName="过车情况">
            <template slot="header-right">
              <div class="header-right">
                <el-button type="primary" size="small" plain icon="el-icon-back" @click="handleBack">
                  返回
                </el-button>
              </div>
            </template>
            <template slot="card-content">
              <div class="realLoad-single">
                <div class="realLoad-single-info" style="{overflow: 'visiable'}">
                  <!-- <img class="lll" :src="DOWNLOADURL + '/' + plateList.imgPath" alt="" /> -->
                   <el-image
                    style="width: 100px; height: 150px"
                    class="lll"
                    :src="DOWNLOADURL + '/' + plateList.imgPath"
                    :preview-src-list="[DOWNLOADURL + '/' + plateList.imgPath]">
                  </el-image>
                  <div class="realLoad-single-info-intro">
                    <p><span>车牌号</span><em>:</em> {{plateList.plate}}</p>
                    <p><span>车辆类型</span><em>:</em> {{plateList.autoTypeName}}</p>
                    <p><span>总重</span><em>:</em> {{plateList.autoWeight}}(kg)</p>
                    <p><span>过车时间</span><em>:</em> {{plateList.passingDate}}</p>
                  </div>
                </div>
                <div class="realLoad-single-info">
                  <!-- <img src="../../../assets/healthMonitorAssets/img/bg_car2.png" alt="" /> -->
                  <div class="realLoad-single-info-intro">
                    <!-- <p><span>总重</span><em>:</em> {{plateList.AutoWeight}}(t)</p>
                    <p><span>过车时间</span><em>:</em> {{plateList.PassingDate}}</p> -->
                  </div>
                </div>
              </div>
            </template>
          </CardContainer>
        </div>
      </div>
    </div>
    <div class="realLoad-box">
      <div class="realLoad-box-table">
        <div class="realLoad-box-switch">
          <el-switch v-show="activeTabName == 'real'" active-value="1" inactive-value="0" v-model="overrunQuery" inactive-text="超限:"> </el-switch>
        </div>
        <el-tabs v-model="activeTabName" @tab-click="handleTabClick1">
          <el-tab-pane label="实时监测" name="real">
            <TableInfo @handleIsShowDetail="setIsShowDetail" :tableData="UpToDate"></TableInfo>
          </el-tab-pane>
          <el-tab-pane label="历史数据" name="history">
            <TableInfo1 @handleIsShowDetail="setIsShowDetail" :tableData="page" :bridgeId="bridgeId"
              :getDatas="getDatas" :histroyQuery="histroyQuery"></TableInfo1>
          </el-tab-pane>
          <!-- <el-tab-pane label="超限数量" name="overload">超限数量</el-tab-pane> -->
        </el-tabs>
      </div>
    </div>
    <SelectBridge ref="selectBridge" @getData="getData"></SelectBridge>
  </div>
</template>

<script>
  // card 容器组件
  import CardContainer from "../components/CardContainer";
  import NoData  from '../../../components/NoData'
  import CarList from "../components/CarList";
  import echarts from "echarts";
  import TableInfo from "./TableInfo";
  import TableInfo1 from "./TableInfo1";
  import SelectBridge from "../components/SelectBridge";
  import base from "@/api/base"; // 导入接口域名列表

  import {
    mapState,
    mapMutations
  } from "vuex";
  export default {
    data() {
      return {
        overrunQuery:'0',
        total: 0,
        plateList:"",
        DOWNLOADURL: base.DOWNLOADURL,
        src: '../../../assets/images/pages/aliNoData.png',
        is1: false,
        is2: false,
        is3: false,
        is4: false,
        trainRateData: [],
        countTodayWeight: [],
        countTodayWeightName: [],
        color: [],
        searchValue: "",
        selectPoint: "1",
        bridgeId: "758323582542544896",
        editableTabs: [],
        editableTabsValue: "",
        carOverLoad: null,
        carComparison: null,
        fromSouth: null,
        formArr: [],
        fromNorth: null,
        southTotal: 329210,
        northTotal: 329210,
        activeTabName: "real",
        isOverLoad: false,
        isShowDetail: true,
        trafficArr: [], //车流量
        UpToDate: [], //实时监测
        page: [], //历史数据
        player:""
      };
    },
    components: {
      CardContainer,
      TableInfo,
      TableInfo1,
      CarList,
      SelectBridge,
      NoData
    },
    computed: {
      ...mapState("realLoad", {
        bridgeIds: "bridgeId",
        // 传感器
        sensor: "sensor",
        // 传感器 id
        sensorId: "sensorId",
        // 传感器code
        sensorCode: "sensorCode",
        pointDetail: "pointDetail",
      }),
    },
    mounted() {
      this.getBridgeAll();
      // this.drawCarOverLoad();
      // this.drawCarComparison();
      // this.drawTrafficFlow();
      // 监听窗口变化
      // this.fuck();

      // window.addEventListener("resize", () => {
      //   this.carOverLoad.resize();
      //   this.carComparison.resize();
      //   this.fromSouth.resize();
      //   this.fromNorth.resize();
      // });
    },
    watch: {
      overrunQuery: {
        handler(val){
          // if(val == '0') {
          //   this.$api.healthMonitor
          //     .queryUpToDateById({
          //       bridgeId: this.bridgeId,
          //       overrunQuery: val
          //       // overrunQuery: 0
          //     })
          //     .then((res) => {
          //       // console.log(res,'555555555555')
          //       if (res.data.success) {
          //         this.UpToDate = res.data.data;
          //         // console.log(this.UpToDate,'444444444444444')
          //       }
          //     });
          // } else {
          //   let paramsData = {
          //     bridgeId: this.bridgeId,
          //     pageNum: 1
          //   }
          //   this.$api.healthMonitor.page(paramsData).then((res) => {
          //     // YU 把历史数据接口的值赋给实时数据这一块
          //     if(res.data.success && this.overrunQuery == '1') {
          //       this.UpToDate = res.data.data;
          //     }
          //   });
          // }
          this.$api.healthMonitor
            .queryUpToDateById({
              bridgeId: this.bridgeId,
              overrunQuery: val
              // overrunQuery: 0
            })
            .then((res) => {
              // console.log(res,'555555555555')
              if (res.data.success) {
                this.UpToDate = res.data.data;
                // console.log(this.UpToDate,'444444444444444')
              }
            });
        },
        deep: true
      },
      bridgeId: {
        handler(newName, oldName) {
          console.log(newName, '桥id')
          if (newName != 0) {
            this.fuck();
            this.countTodayWeightType();
            this.countTodayType();
            this.countAutoWeight();
            this.getDatas();
            this.getVideo(newName)
          }
        },
        // immediate: true,
      },
      editableTabsValue: {
        handler(newVal) {
          this.setBridgeId(newVal);
          this.bridgeId = newVal
          // this.initName = "立面";
        },
      },
    },
    created() {},
    methods: {
      currentChange(i){
      console.log(i);
      this.getVideo(this.bridgeId, i-1)
    },
         // 获取视屏播放地址
    getVideo(id){
      this.$api.healthMonitor.getVideo({
        bridgeId: id
      }).then((res)=>{
        console.log("视屏播放地址", res.data.data);
        this.total = res.data.data.length;
        if(res.data.data.length == 0){
          document.getElementById("id_test_video").innerHTML = "<div class='vvv'></div>";
        }else{
          document.getElementById("id_test_video").innerHTML = "";
        }

        this.player = new TcPlayer("id_test_video", {
      m3u8: res.data.data[0].camera_url, //请替换成实际可用的播放地址
      autoplay: true, //iOS 下 safari 浏览器，以及大部分移动端浏览器是不开放视频自动播放这个能力的
      // poster: "http://www.test.com/myimage.jpg",
      width: "100%", //视频的显示宽度，请尽量使用视频分辨率宽度
      height: "266", //视频的显示高度，请尽量使用视频分辨率高度
      controls: false,
      // live: true,
      x5_fullscreen: true
    });
      })
    },

      //(车流量)
      fuck() {
        // console.log(22222222222222222222222222222222222222222222222222222222)
        this.$api.healthMonitor
          .todayTraffic({
            bridgeId: this.bridgeId
          })
          .then((res) => {
            if (res.data.success) {
              if (!res.data.data[0]) {
                this.is3 = true
                return
              } else
                this.is3 = false
              this.trafficArr = res.data.data;
              this.trafficArr.forEach((item, index) => {
                item.id = `form${index}`;
                let total = 0;
                item.value.forEach((item1) => {
                  total = total + item1.trafficCount;
                });
                item.total = total;
              });
            }
            const _this = this;
            window.setTimeout(function () {
              _this.drawTrafficFlow();
            }, 1000);
          });
      },
      getDatas(params) {
        // YU 历史查询不调用实时数据接口
        this.$api.healthMonitor
          .queryUpToDateById({
            bridgeId: this.bridgeId,
            overrunQuery: this.overrunQuery
          })
          .then((res) => {
            // console.log(res,'555555555555')
            // YU 把历史数据接口的值赋给实时数据这一块
            if (res.data.success) {
            // if (res.data.success && this.overrunQuery == '0') {
              this.UpToDate = res.data.data;
            }
          });
        let data = "";
        params
          ?
          (data = {
            ...params,
            bridgeId: this.bridgeId,
            pageNum: 1
          }) :
          (data = {
            bridgeId: this.bridgeId,
            pageNum: 1
          });
        // data.overrunQuery = '0' // Yu 临时修改！！！
        this.$api.healthMonitor.page(data).then((res) => {
          if (res.data.success) {
            this.page = res.data.data;
          }
          // YU 把历史数据接口的值赋给实时数据这一块
          // if(res.data.success && this.overrunQuery == '1') {
          //   this.UpToDate = res.data.data;
          // }
        });
      },

      // selectBridge
      selectBridge() {
        // console.log(this.$refs.selectBridge);
        this.$refs.selectBridge.init();
      },
      getData(val) {
        console.log("选择桥梁的数据", val);
        this.bridgeId = val[0].id;
        this.editableTabs = val;
        this.editableTabsValue = val[0].id;
        this.setBridgeId(val[0].id);
        this.getVideo(val[0].id)
      },
      ...mapMutations("realLoad", {
        setBridgeId: "BRIDGEID",
        setSensorId: "SENSORID",
        setSensorCode: "SENSORCODE",
        setPointDetail: "POINTDETAIL",
        setSensor: "SENSOR",
      }),
      handleTabClick(tab, event) {
        this.activeTabName = tab.name;
      },
      removeTab(id) {
        console.log(id);
        let tabs = this.editableTabs;
        let activeName = this.editableTabsValue;
        if (activeName === id) {
          tabs.forEach((tab, index) => {
            if (tab.id === id) {
              let nextTab = tabs[index + 1] || tabs[index - 1];
              if (nextTab) {
                activeName = nextTab.id;
              }
            }
          });
        }

        this.editableTabsValue = activeName;
        this.editableTabs = tabs.filter((tab) => tab.id !== id);
        // console.log(this.editableTabsValue);
        this.setBridgeId(this.editableTabsValue);
      },
      // 获取所有桥梁
      getBridgeAll() {
        // this.$api.mearsuringPointSetting.getBridgeAll().then((res) => {
        //   let birdgeListAll = res.data.data[0];
        //   // this.editableTabs = birdgeListAll;
        //   this.editableTabs = [birdgeListAll[0]];
        //   this.editableTabsValue = birdgeListAll[0].id;
        //   // console.log(birdgeListAll[0].id);
        //   this.setBridgeId(birdgeListAll[0].id);
        // });
        this.$api.mearsuringPointSetting.getBridgeAll().then(res => {
          let ownInfo = JSON.parse(localStorage.getItem("ownInfo"))[0]; // 当前视图
          let birdgeListAll = res.data.data[0];
          birdgeListAll.map((item, key) => {
            if (item.id == ownInfo.code) {
              this.editableTabs = [item];
              this.editableTabsValue = item.id;
              this.setBridgeId(item.id);
            }
          });
        });
      },
      //今日车型超载统计
      countTodayWeightType() {
        if (this.bridgeId)
          this.$api.healthMonitor
          .countTodayWeightType({
            bridgeId: this.bridgeId
          })
          .then((res) => {
            // console.log(res.data)
            if (res.data.success) {
              if (!res.data.data[0]) {
                this.is1 = true
                return
              } else
                this.is1 = false
              let data1 = [];
              let name = [];
              res.data.data.forEach((item) => {
                let obj = {
                  value: Number(item.countCarPassNum),
                  name: item.auto_type_name,
                };
                data1.push(obj);
                name.push(item.auto_type_name);
              });
              let color = [
                "#437CDF",
                "#8B57DF",
                "#32D6CD",
                "#32D17E",
                "#FBE033",
              ];
              if (name.length < color.length)
                color.splice(name.length - 1, color.length - name.length);
              console.log(color);
               setTimeout(() => {
               this.drawCarOverLoad(data1, name, color);
              }, 1000);

            } else {
              this.is1 = false
            }
          });
      },

      //今日车型对比
      countTodayType() {

        this.$api.healthMonitor
          .countTodayType({
            bridgeId: this.bridgeId
          })
          .then((res) => {
            if (res.data.success) {
              if (!res.data.data[0]) {
                this.is2 = true
                return
              } else
                this.is2 = false
              console.log(res.data.data);
              let data = [];
              res.data.data.forEach((item) => {
                let obj = {
                  value: item.countNum,
                  name: item.auto_type_name,
                };
                data.push(obj);
              });
              setTimeout(() => {
                this.drawCarComparison(data);
              }, 1000);
            }
          });
      },

      //超限车次频次
      countAutoWeight() {
        this.$api.healthMonitor
          .countAutoWeight({
            bridgeId: this.bridgeId
          })
          .then((res) => {
            if (res.data.success) {
              if (!res.data.data[0]) {
                this.is4 = true
                return
              } else
                this.is4 = false
              this.trainRateData = [];
              res.data.data.forEach((item) => {
                if(item.auto_type_name) {
                  this.trainRateData.push({
                    info: `${item.plate}  ${item.auto_type_name}  车重：${item.AutoWeight}`,
                    value: item.countCarPassNum,
                    unit: "次",
                  });
                } else {
                  this.trainRateData.push({
                    info: `${item.plate}     车重：${item.AutoWeight}`,
                    value: item.countCarPassNum,
                    unit: "次",
                  });
                }
              });

              // console.log(this.trainRateData,'11111111111')
            }
          });
      },

      drawCarOverLoad(data, name, color) {
        let _data = data;
        const _obj = this.arrayToObj(_data, "name");
        this.carOverLoad = new echarts.init(
          document.getElementById("carOverLoad")
        );
        this.carOverLoad.setOption({
          legend: {
            orient: "vertical",
            top: "center",
            right: "10%",
            data: name,
            itemWidth: 12,
            itemHeight: 10,
            formatter: (name) => {
              return `${name}  ${_obj[name]["value"]}`;
            },
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          color,
          series: [{
            name: "今日车型超载统计",
            type: "pie",
            radius: ["30%", "85%"],
            center: ["30%", "50%"],
            roseType: "radius",
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: _data,
          }, ],
        });
      },
      drawCarComparison(data) {
        let _data = data;
        const _title = "今日总计";
        let total = 0;
        data.forEach((item) => {
          total = total + item.value;
        });

        const _obj = this.arrayToObj(_data, "name");
        this.carComparison = new echarts.init(
          document.getElementById("carComparison")
        );
        this.carComparison.setOption({
          title: [{
            text: "{name|" + _title + "}\n{val|" + total + "}",
            top: "center",
            left: "29%",
            textStyle: {
              rich: {
                name: {
                  fontSize: 12,
                  fontWeight: 400,
                  color: "#C9CED4",
                  padding: [10, 0],
                },
                val: {
                  fontSize: 24,
                  fontWeight: "bold",
                  color: "#444444",
                },
              },
            },
            textAlign: "center",
          }, ],
          legend: {
            orient: "vertical",
            top: "center",
            right: "10%",
            // data: ["小型车", "中型车", "大型车", "大货车", "特种车", "其他车"],
            itemWidth: 12,
            itemHeight: 10,
            formatter: (name) => {
              return `${name}  ${_obj[name]["value"]}`;
            },
          },
          tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)",
          },
          color: [
            "#437CDF",
            "#8B57DF",
            "#32D6CD",
            "#32D17E",
            "#FBE033",
            "#FCAA5D",
          ],
          series: [{
            name: "今日车型对比",
            type: "pie",
            radius: ["60%", "80%"],
            center: ["30%", "55%"],
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            data: _data,
          }, ],
        });
      },
      drawTrafficFlow() {
        // this.fromSouth = new echarts.init(document.getElementById("fromSouth"));
        // this.fromNorth = new echarts.init(document.getElementById("fromNorth"));
        let option = (_data) => {
          return {
            tooltip: {
              trigger: 'item',
              formatter: ((item) => {
                return `${item.marker}${item.name}</br>数量：${item.value}`
              })
            },
            grid: {
              top: "8%",
              right: "1%",
              left: "1%",
              bottom: "1%",
            },
            xAxis: {
              show: true,
              type: "category",
              axisLine: {
                show: false,
              },
              axisTick: {
                alignWithLabel: true
              }
            },
            yAxis: {
              type: "value",
              show: false,
            },
            series: [{
              name: "今日车流量对比",
              type: "bar",
              itemStyle: {
                normal: {
                  color: function (params) {
                    let _colorList = [
                      "#1F5FD3",
                      "#2061D3",
                      "#2A6FD8",
                      "#2467D5",
                      "#2669d6",
                      "#2A6FD8",
                      "#2C73D9",
                      "#2b6ed8",
                      "#337cdd",
                      "#327bdd",
                      "#3985df",
                      "#3b88e0",
                      "#3e8de1",
                      "#3f8fe3",
                      "#4193e3",
                      "#4497e4",
                      "#479be5",
                      "#4a9fe7",
                      "#51a9ea",
                      "#52adeb",
                      "#53aeeb",
                      "#57b2ec",
                      "#56b2ec",
                      "#59b6ed",
                      "#5bbaef",
                      "#5fbff0",
                      "#62c3f1",
                      "#6dcbf4",
                      "#64c8f3",
                      "#68ccf4",
                      "#6bd0f5",
                      "#6cd0f6",
                      "#6ed4f6",
                      "#70d9f8",
                      "#70d9f8",
                      "#74defa",
                      "#73ddf9",
                    ];
                    return _colorList[params.dataIndex];
                  },
                },
              },
              data: _data,
            }],
          };
        };
        this.trafficArr.forEach((item, index) => {
          this.formArr[index] = new echarts.init(
            document.getElementById(item.id)
          );
          let datas = [];
          item.value.forEach((item1) => {
            datas.push({value:item1.trafficCount,name:item1.passDate});
          });

          this.formArr[index].setOption(option(datas));
          console.log(datas,'1212121')
          window.addEventListener("resize", () => {
            this.formArr[index].resize();
          });
        });
        // const _southData = [100, 23, 45, 55, 66, 88, 100, 23, 32, 34, 44, 66, 88, 65, 99, 22, 34, 56, 87, 22, 33, 21,
        //   33, 66, 12, 33, 44, 56, 77
        // ];
        // const _northData = [100, 23, 45, 55, 66, 88, 100, 23, 32, 34, 44, 66, 88, 65, 99, 22, 34, 56, 87, 22, 33, 21,
        //   33, 66, 12, 33, 44, 56, 77
        // ];
        // this.fromSouth.setOption(option(_southData));
        // this.fromNorth.setOption(option(_northData));
      },
      arrayToObj(arr, key) {
        let _obj = {};
        arr.forEach((item) => {
          _obj[item[key]] = item;
        });
        return _obj;
      },
      handleTabClick1(tab, event) {
        this.activeTabName = tab.name;
      },
      setIsShowDetail(value) {
        console.log(value);
        this.isShowDetail = false;
        this.plateList = value;
      },
      handleBack() {
        this.isShowDetail = true;
      },
      histroyQuery(params) {
        let data = "";
        params
          ?
          (data = {
            ...params,
            bridgeId: this.bridgeId,
            pageNum: 1
          }) :
          (data = {
            bridgeId: this.bridgeId,
            pageNum: 1
          });
        // data.overrunQuery = '0' // Yu 临时修改！！！
        this.$api.healthMonitor.page(data).then((res) => {
          if (res.data.success) {
            this.page = res.data.data;
          }
        });
      }
    },
  };

</script>

<style lang="scss" scoped>
#id_test_video{
  margin: 0 auto;
}
/deep/.vcp-player{
  width: 100%;
  margin: 0 auto;
}
/deep/.el-pager li{
  background: transparent !important
}
/deep/.el-pagination .btn-next, .el-pagination .btn-prev{
  background: transparent !important
}
/deep/.el-pagination button:disabled{
  background-color: transparent !important
}
/deep/.el-pagination .btn-prev{
  background: transparent !important
}
.fy{
  text-align: right;
  margin-top: 5px;
  position:absolute;
  top: 0;
  z-index: 9999 !important;
  width: 100%;

}
  .tips {
    position: absolute;
    left: 0;
    right: 0;
    /* bottom: 0; */
    top: 63px;
    margin: 0 auto;
    width: 90%;
    height: 250px;
  }

  .myImages {
    width: 100%;
    height: 200px;
  }

  .search {
    height: 75px;
    display: flex;
    justify-content: start;
    background: #fff;
    padding: 10px 20px;
    // margin-bottom: 15px;
    border-radius: 3px;

    .seletBtn {
      margin-right: 20px;
      height: 40px;
    }

    .top {
      position: relative;
      top: 6px;
    }
  }

  .realLoad-box {
    min-height: 300px;
    height: auto;
  }

  .realLoad-box-middle {
    height: 100%;
  }

  .realLoad {
    &-search {
      &-input {
        float: left;
      }

      &-btn {
        float: right;
      }

      background: #fff;
      padding: 15px 20px;
      margin-bottom: 15px;
      border-radius: 3px;
      overflow: hidden;

      .search_btn {
        margin-left: 30px;
      }
    }

    &-box {
      width: 100%;
      padding-top: 20px;
      display: flex;
      justify-content: space-between;

      &-left {
        flex: 2;
      }

      &-right {
        flex: 1;
        padding-left: 20px;
      }

      &-middle {
        float: left;
        width: 50%;

        &:first-child {
          padding-right: 10px;
        }

        &:last-child {
          padding-left: 10px;
        }
      }

      &-detail {
        height: 286px;
        background: #fff;
        padding: 8px;
        position: relative;
        font-size: 12px;
        font-weight: 500;
        color: rgba(255, 255, 255, 1);

        img {
          width: 100%;
          height: 100%;
        }

        &-name {
          position: absolute;
          top: 25px;
          left: 25px;
        }

        &-time {
          position: absolute;
          top: 25px;
          right: 25px;
        }
      }

      &-table {
        background: #fff;
        padding: 8px 14px 10px 14px;
        width: 100%;
        min-height: 308px;
        position: relative;

        /deep/.el-tabs__item {
          font-size: 16px;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #999;
        }

        /deep/.el-tabs__active-bar {
          background-color: #327bdc;
        }

        /deep/.el-tabs__item.is-active {
          font-size: 16px;
          font-family: PingFangSC-Semibold, PingFang SC;
          font-weight: 600;
          color: #327bdc;
        }
      }

      &-switch {
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 9999;

        /deep/.el-switch__label.is-active,
        /deep/.el-switch__label {
          color: #999;
        }
      }

      &:last-child {
        padding-bottom: 20px;
      }
    }

    &-trafficFlow {
      width: 100%;
      height: 204px;
      padding: 0 10px;
      overflow: visiable;

      &-item {
        width: 50%;
        float: left;

        &:first-child {
          padding-right: 25px;
        }

        &:last-child {
          padding-left: 25px;
        }
      }

      &-header {
        font-size: 24px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
        margin-top: 20px;

        span {
          display: inline-block;
          height: 42px;
          line-height: 42px;
          vertical-align: top;
          margin-left: 8px;
        }
      }

      &-chart {
        width: 100%;
        height: 66px;
      }

      &-num {
        font-size: 36px;
        font-weight: 400;
        color: rgba(252, 170, 93, 1);
        margin-top: 12px;
      }
    }

    &-carOverLoad {
      width: 100%;
      height: 204px;
    }

    &-carComparison {
      width: 100%;
      height: 211px;
    }

    &-single {
      width: 100%;
      height: 211px;
      padding-top: 20px;

      &-info {
        margin-bottom: 10px;
        overflow: hidden;

        img {
          width: 126px;
          height: 180px;
          float: left;
          border-radius: 4px;
        }

        &-intro {
          float: right;
          width: calc(100% - 126px);
          height: 87px;

          p {
            width: 100%;
            padding-left: 10px;
            line-height: 40px;
            font-size: 14px;
            font-weight: 400;
            color: rgba(68, 68, 68, 1);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;

            span {
              color: rgba(153, 153, 153, 1);
              display: inline-block;
              width: 70px;
              text-align: justify;
              text-align-last: justify;
              text-justify: distribute-all-lines;
            }

            em {
              color: rgba(153, 153, 153, 1);
              display: inline-block;
              font-style: normal;
              margin-right: 5px;
            }
          }
        }
      }
    }
  }

  /deep/.el-tabs--card>.el-tabs__header .el-tabs__item {
    border-bottom: 1px solid #e4e7ed !important;
  }

  /deep/.is-active.el-tabs__item.is-top.is-active.is-closable {
    background: #327bdc !important;
    color: #fff !important;
  }

  .Num {
    font-size: 34px;
    font-weight: 400;
    color: #fcaa5d;
    margin-right: 30px;
    float: right;
  }

  .traff {
    height: 120px !important;
  }

</style>
<style>
.realLoad-single-info{
  overflow: visiable !important;
}
.lll{
  height:180px
}
#ssss{
  background: #000;
  width: 100%
}

#carComparison{
  width: 100%
}
</style>
